<template>
	<div style="height: 100%;overflow-x: hidden;">
		<div style="padding: 10px;border-radius: 8px;background: #fff;margin-bottom: 10px;justify-content: center;"
			class="displayFlex">

			<div class="date-item displayFlex">
				<el-select v-model="params.equipmentId" filterable remote placeholder="选择生产设施"
					:remote-method="remoteMethod" :loading="loading"
					@change="getProductionEquipmentDateStandingBookList">
					<el-option v-for="item in productionList" :key="item.id" :label="item.equipmentName"
						:value="item.id">
					</el-option>
				</el-select>
				<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
			</div>

			<div class="date-item displayFlex" style="margin-left: 20px;">
				<el-date-picker v-model="params.year" type="year" placeholder="选择年" format="yyyy"
					style="border-radius: 40px;width: 60px;text-align: center;" :clearable="false" value-format="yyyy"
					@change="getProductionEquipmentDateStandingBookList()">
				</el-date-picker>
				<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
			</div>
		</div>

		<div>
			<div class="bgfff">
				<div class="displayFlexBet textCenter"
					style="padding-bottom: 20px;padding-top: 20px;border-bottom: 1px solid#EDECF1;">
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 1?'defenceSelectClass':'']"
						@click="params.month='01',getProductionEquipmentDateStandingBookList()">
						<div class="font16">1月</div>
						<div class="font12">January</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 2?'defenceSelectClass':'']"
						@click="params.month='02',getProductionEquipmentDateStandingBookList()">
						<div class="font16">2月</div>
						<div class="font12">February</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 3?'defenceSelectClass':'']"
						@click="params.month='03',getProductionEquipmentDateStandingBookList()">
						<div class="font16">3月</div>
						<div class="font12">March</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 4?'defenceSelectClass':'']"
						@click="params.month='04',getProductionEquipmentDateStandingBookList()">
						<div class="font16">4月</div>
						<div class="font12">April</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 5?'defenceSelectClass':'']"
						@click="params.month='05',getProductionEquipmentDateStandingBookList()">
						<div class="font16">5月</div>
						<div class="font12">May</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 6?'defenceSelectClass':'']"
						@click="params.month='06',getProductionEquipmentDateStandingBookList()">
						<div class="font16">6月</div>
						<div class="font12">June</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 7?'defenceSelectClass':'']"
						@click="params.month='07',getProductionEquipmentDateStandingBookList()">
						<div class="font16">7月</div>
						<div class="font12">July</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 8?'defenceSelectClass':'']"
						@click="params.month='08',getProductionEquipmentDateStandingBookList()">
						<div class="font16">8月</div>
						<div class="font12">August</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 9?'defenceSelectClass':'']"
						@click="params.month='09',getProductionEquipmentDateStandingBookList()">
						<div class="font16">9月</div>
						<div class="font12">September</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 10?'defenceSelectClass':'']"
						@click="params.month='10',getProductionEquipmentDateStandingBookList()">
						<div class="font16">10月</div>
						<div class="font12">October</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 11?'defenceSelectClass':'']"
						@click="params.month='11',getProductionEquipmentDateStandingBookList()">
						<div class="font16">11月</div>
						<div class="font12">November</div>
					</div>
					<div class="u-flex-1 monthItem" :class="[Number(params.month) == 12?'defenceSelectClass':'']"
						@click="params.month='12',getProductionEquipmentDateStandingBookList()">
						<div class="font16">12月</div>
						<div class="font12">December</div>
					</div>
				</div>
				<div style="flex-wrap: wrap;display: flex;">
					<div v-for="(item,index) in dayList" :key="index" @click="recordOrder(item)" class="point"
						style="width: 12.5%;cursor: pointer;padding: 10px;color: #555;position: relative;text-align: left;background: #fff;"
						:style="{'color':item.bg,'border-right':index%7==0?'':'1px solid#F8F7F9','border-bottom':index > 24?'':'1px solid#F8F7F9'}">
						<div style="margin-bottom: 5px;font-size: 15px;">{{item.dateStr}}</div>
						<div style="color: #333;" v-if="item.totalProductionQtyStr">
							<span style="font-size: 24px;">{{item.totalProductionQtyStr}}</span>
						</div>
						<div style="color: #888;" v-else>
							<div style="font-size: 24px;" v-if="item.workStatus">0</div>
							<div class="font13 mt10" v-else>未做台账</div>
						</div>
					</div>
					<div @click="gotoDet()"
						style="width: calc(12.5% - 20px);padding: 10px;color: #555;position: relative;text-align: center;background: #fff;">
						<div style="color: #3A3EF4;">查看详细台账</div>
					</div>
				</div>
			</div>


			<div class="displayFlexBet bgfff pad20" style="border-radius: 8px;margin-top: 10px;" v-if="monthDate">
				<div style="border-right: 1px solid#E2E1E7;flex: 1;">
					<div style="color: #000;font-size: 16px;">{{params.month}}月有{{monthDate.monthData.dayNum}}天在生产</div>

					<div class="displayFlex">
						<div style="padding: 20px;width: 130px;">
							<div style="color: #555;" class="font13">生产产品</div>
							<div>
								<span class="font16 mr5">{{monthDate.monthData.productList.length}}</span>
								<span>类</span>
							</div>
						</div>

						<div class="displayFlex" style="width: calc(100% - 150px);overflow-x: auto;flex-wrap: nowrap;">
							<div v-for="(item1,index1) in monthDate.monthData.productList" class="mr10"
								style="background: #F6F7FB;padding: 10px 30px 10px;border-radius: 8px;width: 150px;">
								<div style="color: #888;" class="font13">{{item1.productName}}</div>
								<div>
									<span style="font-size: 24px;">{{item1.qty}}</span>
									<span style="font-size: 13px;">{{item1.unitValue}}</span>
								</div>
							</div>
						</div>
					</div>

					<div class="displayFlex">
						<div style="padding: 20px;width: 130px;">
							<div style="color: #555;" class="font13">原辅料</div>
							<div>
								<span class="font16 mr5">{{monthDate.monthData.materialList.length}}</span>
								<span>类</span>
							</div>
						</div>

						<div class="displayFlex" style="width: calc(100% - 150px);overflow-x: auto;flex-wrap: nowrap;">
							<div v-for="(item1,index1) in monthDate.monthData.materialList" class="mr10"
								style="background: #F6F7FB;padding: 10px 30px 10px;border-radius: 8px;width: 150px;">
								<div style="color: #888;" class="font13">{{item1.materialName}}</div>
								<div>
									<span style="font-size: 24px;">{{item1.qty}}</span>
									<span style="font-size: 13px;">{{item1.unitValue}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div style="flex: 1;padding-left: 20px;">
					<div style="color: #000;font-size: 16px;">{{params.year}}年有{{monthDate.yearData.dayNum}}天在生产</div>

					<div class="displayFlex">
						<div style="padding: 20px;width: 130px;">
							<div style="color: #555;" class="font13">生产产品</div>
							<div>
								<span class="font16 mr5">{{monthDate.yearData.productList.length}}</span>
								<span>类</span>
							</div>
						</div>

						<div class="displayFlex" style="width: calc(100% - 150px);overflow-x: auto;flex-wrap: nowrap;">
							<div v-for="(item1,index1) in monthDate.yearData.productList" class="mr10"
								style="background: #F6F7FB;padding: 10px 30px 10px;border-radius: 8px;width: 150px;">
								<div style="color: #888;" class="font13">{{item1.productName}}</div>
								<div>
									<span style="font-size: 24px;">{{item1.qty}}</span>
									<span style="font-size: 13px;">{{item1.unitValue}}</span>
								</div>
							</div>
						</div>
					</div>

					<div class="displayFlex">
						<div style="padding: 20px;width: 130px;">
							<div style="color: #555;" class="font13">原辅料</div>
							<div>
								<span class="font16 mr5">{{monthDate.yearData.materialList.length}}</span>
								<span>类</span>
							</div>
						</div>

						<div class="displayFlex" style="width: calc(100% - 150px);overflow-x: auto;flex-wrap: nowrap;">
							<div v-for="(item1,index1) in monthDate.yearData.materialList" class="mr10"
								style="background: #F6F7FB;padding: 10px 30px 10px;border-radius: 8px;width: 150px;">
								<div style="color: #888;" class="font13">{{item1.materialName}}</div>
								<div>
									<span style="font-size: 24px;">{{item1.qty}}</span>
									<span style="font-size: 13px;">{{item1.unitValue}}</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div style="background: #fff;padding: 10px;margin-top: 10px;border-radius: 8px;" class="displayFlex">
				<div class="displayFlex">
					<div class="date-item displayFlex" style="margin-left: 20px;">
						<el-date-picker v-model="params2.year" type="year" placeholder="选择年" format="yyyy"
							style="border-radius: 40px;width: 60px;text-align: center;" :clearable="false"
							value-format="yyyy" @change="getProductionEquipmentDateStandingBookList()">
						</el-date-picker>
						<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
					</div>

					<div class="date-item displayFlex" style="margin-left: 20px;">
						<el-date-picker v-model="params2.month" type="month" placeholder="选择月"
							style="border-radius: 40px;width: 60px;text-align: center;" :clearable="false" format="MM"
							value-format="MM" @change="getProductionEquipmentDateStandingBookList()">
						</el-date-picker>
						<i class="el-icon-caret-bottom" style="margin-bottom: 6px;color: #999;"></i>
					</div>
				</div>

				<div class="displayFlex ml30">
					<div v-for="(item,index) in dataList1" :key="index" style="padding:0px 20px;text-align: left;">
						<div class="mb5">{{item.installationName}}</div>
						<div style="font-size:12px;color:#999">{{item.runHour+'小时'}}</div>
					</div>
				</div>
			</div>


			<div style="background: #fff;padding: 10px;margin-top: 10px;border-radius: 8px;">
				<div style="color: #555;" class="fontBold mb20">运行时间</div>
				<div id="chart2" style="width: 100%;height: 400px;"></div>
			</div>

			<div style="background: #fff;padding: 10px;margin-top: 10px;border-radius: 8px;">
				<div class="displayFlex">
					<div v-for="(item,index) in lastDay" :key="index"
						style="width:40px;height:40px;line-height:40px;text-align:center;font-size: 12px;color: #555;"
						:class="[Number(params2.day) == item?'itemSelected':'']" @click="formLineChart(item)">{{item}}日
					</div>
				</div>
				<div id="chart3" style="width: 100%;height: 400px;"></div>
			</div>
		</div>

		<el-dialog :title="params.month+'-'+selectDay+'记录台账'" :visible.sync="dialogVisible" width="35%">
			<el-form ref="form" :model="recordDet" label-width="120px">
				<el-form-item label="生产是否正常">
					<el-radio-group v-model="recordDet.workStatus">
						<el-radio label="NORMAL" border>正常</el-radio>
						<el-radio label="ABNORMAL" border>异常</el-radio>
						<el-radio label="NOT_PRODUCE" border>不生产</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="产品和原辅料">
					<div>
						<div v-for="(item,index) in recordDet.productList" :key="index" @click="chooseThisProduct(item)"
							style="margin-bottom: 10px;">
							<el-checkbox :value="item.isSelect" border>
								<span>{{item.productName}}</span>
							</el-checkbox>
							<span v-if="item.isSelect"
								style="margin-left: 5px;">{{item.qty || 0}}{{item.unitValue}}</span>
						</div>
					</div>
				</el-form-item>

				<el-form-item label="能源">
					<div>
						<div v-for="(item,index) in recordDet.energyList" :key="index" style="margin-bottom: 10px;"
							class="displayFlex">
							<span style="width:80px">{{item.energyName}}</span>
							<el-input v-model="item.qty" style="width: 100px;"></el-input>
							<span class="ml10">{{item.unit}}</span>
						</div>
					</div>
				</el-form-item>

				<div style="margin-bottom: 20px;">核心运行规格参数</div>
				<el-form-item v-for="(item,index) in recordDet.parameterList" :key="index" :label="item.parameterName">
					<div class="displayFlex">
						<el-input placeholder="参数值" v-model="item.qty"></el-input>
						<span style="margin-left: 10px;">{{item.unitValue}}</span>
					</div>
				</el-form-item>

				<div style="margin-bottom: 20px;">运行时间</div>
				<div v-for="(item,index) in recordDet.runtimeList">
					<div class="mb10">
						<span>{{item.subEquipName}}</span>
						<span class="ml10">{{item.subEquipNo}}</span>
						<i class="ml30 el-icon-circle-plus-outline" style="color: #67C23A;"
							@click="item.runtimeList.push({startTime:'',endTime:''})"></i>
					</div>

					<div class="displayFlex mb10" v-for="(item2,index2) in item.runtimeList" :key="index2">
						<el-time-picker v-model="item2.startTime" placeholder="开始时间" value-format="HH:mm:ss"
							format="HH:mm" />
						<span class="ml20 mr20">~</span>
						<el-time-picker v-model="item2.endTime" placeholder="结束时间" value-format="HH:mm:ss"
							format="HH:mm" />

						<i class="ml30 el-icon-remove-outline" style="color: #F56C6C;"
							@click="item.runtimeList.splice(index2,1)"></i>
					</div>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="recordDet={},dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveStandingBook">保存</el-button>
			</div>
		</el-dialog>

		<el-dialog :title="params.month+'-'+selectDay+'记录台账'" :visible.sync="dialogVisible2" width="35%">
			<el-form ref="form" :model="chooseProduct" label-width="120px">
				<el-form-item label="产量" required>
					<div class="displayFlexBet">
						<el-input placeholder="产量" v-model="chooseProduct.qty"></el-input>
						<span class="ml10">{{chooseProduct.unitValue}}</span>
					</div>
				</el-form-item>

				<el-form-item v-for="(item,index) in chooseProduct.materialList" :key="index"
					:label="item.materialName">
					<div class="displayFlex">
						<el-input placeholder="值" v-model="item.qty"></el-input>
						<span class="ml10">{{item.unitValue}}</span>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible2 = false,chooseProduct = {}">取 消</el-button>
				<el-button type="primary" @click="saveProduct">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'
	let that
	export default {
		data() {
			return {
				params: {
					year: moment().format('YYYY'),
					month: moment().format('MM'),
					equipmentId: '',
				},
				params2: {
					year: moment().format('YYYY'),
					month: moment().format('MM'),
					day: "01",
					equipmentId: '',
				},
				recordDet: {},
				chooseProduct: {},
				loading: false,
				dialogVisible: false,
				dialogVisible2: false,
				productionList: [],
				dayList: [],
				monthDate: "",
				dataList1: [],
				dataList2: [],
				lastDay: 0,
				selectDay: "01",
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.pageProductionEquipmentBase()
		},

		methods: {
			formLineChart(day) {
				if (day) {
					if (day < 9) day = '0' + day
					else day = '' + day

					that.params2.day = day
				}
				that.lastDay = new Date(that.params.year, that.params.month, 0).getDate();
				that.ajax({
					url: '/productionEquipment/countDayRunHours',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						let dataList = result.data
						var chartDom = document.getElementById('chart3');
						var myChart = echarts.init(chartDom);
						var option;
						let seriesData = []
						let legendData = []

						for (let item of dataList) {
							legendData.push({
								'name': item.installationName
							})
							let seriesItem = {
								type: 'line',
								name: item.installationName,
								data: []
							}
							for (let item2 of item.dateList) {
								seriesItem.data.push([item2.date, item2.num])
							}
							seriesData.push(seriesItem)
						}

						option = {
							legend: {
								show: true,
								data: legendData
							},
							tooltip: {
								trigger: 'axis'
							},
							xAxis: {
								type: 'time',
							},
							yAxis: {
								type: 'value',
								axisLabel: {
									show: false,
									textStyle: {
										color: '#D7D7D7', //文字颜色
									},
								},
							},
							series: seriesData
						};

						option && myChart.setOption(option);
					},
				})
			},

			formBarChart() {
				
				setTimeout(function(){
					that.ajax({
						url: '/productionEquipment/countMonthRunHours',
						data: JSON.stringify({
							equipmentId: that.params.equipmentId,
							recordDate: that.params2.year + "-" + that.params2.month + "-01"
						}),
						contentType: 'application/json',
						success: function(result) {
							let dataList = result.data
							let dimensions = ['product']
							let source = []
							let series = []
							let legendData = []
							let lastDay = new Date(that.params2.year, that.params2.month, 0).getDate();
					
							for (let item of dataList) {
								legendData.push({
									'name': item.installationName
								})
								dimensions.push(item.installationName)
								series.push({
									type: 'bar'
								})
							}
					
							for (let i = 1; i <= lastDay; i++) {
								let dateStr = i <= 9 ? '0' + i + "日" : i + "日"
								let _item = {
									'product': dateStr
								}
								for (let item of dataList) {
									for (let item2 of item.list) {
										if (item2.recordDateStr == _item.product) {
											_item[item.installationName] = item2.runHour
										}
									}
					
								}
								source.push(_item)
							}
					
							var chartDom = document.getElementById('chart2');
							var myChart = echarts.init(chartDom);
							let option = {
								legend: {
									show: true,
									//data: legendData
								},
								tooltip: {},
								dataset: {
									dimensions: dimensions,
									source: source
								},
								xAxis: {
									type: 'category'
								},
								yAxis: {
									type: 'value',
									axisLabel: {
										textStyle: {
											color: '#D7D7D7', //文字颜色
										},
									},
								},
								series: series
							};
					
							option && myChart.setOption(option,true);
						},
					})
				},1000)
				


			},

			countTotalRunHours() {
				that.ajax({
					url: '/productionEquipment/countTotalRunHours',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-01"
					}),
					contentType: 'application/json',
					success: function(result) {
						let taotal = 0
						for (let item of result.data) {
							taotal += Number(item.runHour)
						}
						for (let item of result.data) {
							item.percent = (item.runHour / taotal) * 100
						}
						//console.log(result.data, taotal)
						that.dataList1 = result.data
						that.formBarChart()
						that.formLineChart()
					},
				})
			},

			saveStandingBook() {
				for (let item of that.recordDet.runtimeList) {
					if (item.runtimeList && item.runtimeList.length > 0) {
						for (let item2 of item.runtimeList) {
							item2.startTime = that.params.year + "-" + that.params.month + "-" + that.selectDay + " " +
								item2.startTime
							item2.endTime = that.params.year + "-" + that.params.month + "-" + that.selectDay + " " + item2
								.endTime
						}
					}
				}
				if (!that.recordDet.workStatus) return that.$message.error("状态必填")
				//console.log(that.recordDet.runtimeList)
				that.$confirm('是否确认保存?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/productionEquipment/saveStandingBook',
						contentType: 'application/json',
						data: JSON.stringify(that.recordDet),
						success: function(result) {
							that.$message.success("保存成功！")
							that.dialogVisible = false
							that.recordDet = {}
							that.pageProductionEquipmentBase()
						},
					})
				})
			},

			saveProduct() {
				if (!that.chooseProduct.qty && that.recordDet.workStatus != 'NOT_PRODUCE') return that.$message.error(
					"请输入产品的产量")
				that.chooseProduct.isSelect = true
				that.dialogVisible2 = false
			},

			chooseThisProduct(item) {
				that.chooseProduct = item
				that.dialogVisible2 = true
			},

			recordOrder(item) {
				//console.log(item)
				that.selectDay = item.dateStr.split("日")[0]
				that.ajax({
					url: '/productionEquipment/getStandingBookByDate',
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						recordDate: item.fullDateStr
					}),
					success: function(result) {
						if (result.data.runtimeList && result.data.runtimeList.length > 0) {
							for (let item of result.data.runtimeList) {
								for (let item2 of item.runtimeList) {
									if (item2.startTime && item2.startTime.split(" ").length > 1) item2
										.startTime = item2.startTime.split(" ")[1]
									if (item2.endTime && item2.endTime.split(" ").length > 1) item2.endTime =
										item2.endTime.split(" ")[1]
								}
							}
						}
						//console.log(result.data)
						that.recordDet = result.data
						that.dialogVisible = true
					},
				})
			},

			gotoDet() {
				that.$router.push("/produceManage/orderDet?ticketId=" + that.params.ticketId + "&monthDate=" + that.params
					.year +
					"-" + that.params.month + "&equipmentId=" + that.params.equipmentId)
			},

			remoteMethod(query) {

			},

			//月度统计
			countProductionEquipmentProductStandingBook() {
				that.ajax({
					url: '/productionEquipment/countProductionEquipmentProductStandingBook?ticketId=' +
						that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						monthDate: that.params.year + "-" + that.params.month + "-01" // 月度时间
					}),
					success: function(result) {
						that.monthDate = result.data
					},
				})
			},

			getProductionEquipmentDateStandingBookList() {
				that.ajax({
					url: '/productionEquipment/getProductionEquipmentDateStandingBookList?ticketId=' +
						that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						monthDate: that.params.year + "-" + that.params.month + "-01" // 月度时间
					}),
					success: function(result) {
						for (let item of result.data) {
							if (item.workStatus) {
								item.bg = '#333'
							} else {
								//item.bg = '#fff'
								item.bg = "#888 "
							}
						}
						that.dayList = result.data

						that.countProductionEquipmentProductStandingBook()
						that.countTotalRunHours()
					},
				})
			},

			pageProductionEquipmentBase() {
				that.ajax({
					url: '/productionEquipment/pageProductionEquipmentBase?pageIndex=1' +
						'&pageSize=50&ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						ticketId: that.params.ticketId,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.productionList = result.data.records
							if (that.productionList.length > 0 && !that.params.equipmentId) that.params
								.equipmentId = that.productionList[0].id
							that.getProductionEquipmentDateStandingBookList()

						}
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: 30px !important;
		padding: 0 2px 3px !important;
		font-size: 10px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #333 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 16px !important;

	}

	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}

	.defenceSelectClass {
		color: #3a3ef4 !important;
		font-weight: bold;
	}


	.u-flex-1 {
		flex: 1;
	}

	.monthItem {
		color: #777777;
		cursor: pointer;
	}

	.itemSelected {
		border-radius: 50%;
		background: #3A3EF4;
		color: #fff !important;
	}
</style>